<template>
	<view>
		<!-- 顶部占位 -->
		<view class="bg-red">
			<view class="header-bar"></view>
		</view>
		<!-- //顶部占位 -->
		<!-- 顶部红色盒子 -->
		<view class="pb50 topBox ">
			<view class="flex row-between">
				<view class="ml28">
					<u-icon name="arrow-left" color="#fff" size="38" @click="gotoback"></u-icon>
				</view>
				<text class="fs30 color-f mr40">订单支付</text>
				<text></text>
			</view>
			<view class="mt70 text-center ">
				<!-- <text class="fs24 color-f">支付剩余时间<u-count-down timestamp="1800"></u-count-down></text> -->
				<view class="fs50 color-f mt30">¥ {{total_amount}}</view>
			</view>
		</view>
		<!-- 顶部红色盒子 -->

		<view class="pl30 pr30">
			<view class="fs28 color3 mt30 mb20">选择付款方式</view>
			<view class="radius16">
				<!-- 支付方式tab栏 -->
				<view class=" pl30 pt30 pr30 bg-f tabox">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color='#D23030'>
					</u-tabs>
				</view>
				<!-- //支付方式tab栏 -->
				<view class="pt30 bg-f flex row-column col-center pb30 urlbox">
					<!-- 二维码盒子 -->
					<view class="">
						<image :src="pay_wechat" class="w340 h340 radius16" v-if="current==0"></image>
						<image :src="pay_alipay" class="w340 h340 radius16" v-if="current==1"></image>
						<!-- 	<view class="">{{pay_bank_name}}</view>
						<view class="">{{pay_account_holder}}</view>
						<view class="">{{pay_bank_card_no}}</view> -->
						<view class="" v-if="current==2">
							<u-form ref="uForm" label-width="220">
								<u-form-item label="银行名称">
									<u-input v-model="pay_bank_name" :disabled="true" />
								</u-form-item>
								<u-form-item label="银行开户人">
									<u-input v-model="pay_account_holder" :disabled="true" />
								</u-form-item>
								<u-form-item label="银行卡号">
									<u-input v-model="pay_bank_card_no" :disabled="true" />
								</u-form-item>
							</u-form>
						</view>
					</view>
					<view class="saveBtn mt30" @click="saveImg" v-if="current!=2">保存收款码</view>
				</view>
			</view>

			<view class=" pl30 pt30 pr30 pb30 radius16 mt30">
				<view class="fs28 color3 mt30 mb20">上传转账凭证</view>
				<view class="flex">
					<image :src="showImg" v-if="showImg" class="w200 h200 mr20" @click="uploadBtn"></image>
					<image src="@/static/image/index/upload.png" class="w200 h200" @click="uploadBtn" v-else></image>
				</view>

			</view>


			<!-- 底部的确认按钮 -->
			<view class="footerbtn h88" @click="payBtn">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "orderPay",
		onLoad(opt) {
			if (opt.id) {
				this.query.id = opt.id
				this.total_amount = opt.total
			} else {
				this.total_amount = uni.getStorageSync('orderInfo').total_amount
				this.query.id = uni.getStorageSync('orderInfo').trade_sn
			}
			this.shop_id = opt.shop_id
			// this.pay_wechat = uni.getStorageSync('config').pay_wechat
			// this.pay_alipay = uni.getStorageSync('config').pay_alipay
			// this.pay_bank_name = uni.getStorageSync('config').pay_bank_name
			// this.pay_account_holder = uni.getStorageSync('config').pay_account_holder
			// this.pay_bank_card_no = uni.getStorageSync('config').pay_bank_card_no
			//获取店铺支付二维码
			this.getshopPay()
		},
		data() {
			return {
				//店铺id
				shop_id: '',
				total_amount: '',
				list: [{
					name: '微信',
				}, {
					name: '支付宝'
				}, {
					name: '银行卡',
				}],
				current: 0,
				// 演示地址，请勿直接使用
				action: 'http://www.example.com/upload',
				fileList: [],
				pay_wechat: '',
				pay_alipay: '',
				pay_bank_name: '',
				pay_account_holder: '',
				pay_bank_card_no: '',
				//上传后显示图片
				showImg: '',
				//提交信息
				query: {
					image: '',
					id: '',
					type: 1
				}
			};
		},
		methods: {
			//获取店铺二维码
			getshopPay() {
				this.$api.shopPay({
					shop_id: this.shop_id
				}).then(res => {
					console.log('shop', res)
					this.pay_wechat = res.data.wechat
					this.pay_alipay = res.data.alipay
					this.pay_bank_name = res.data.bank_name
					this.pay_account_holder = res.data.bank_holder
					this.pay_bank_card_no = res.data.bank_card_no

				})
			},
			//点击tab栏
			change(index) {
				this.current = index;
				console.log(index)
				this.query.type = index + 1
			},
			//上传凭证
			uploadBtn() {
				this.$tool.upload().then(res => {
					console.log(res)
					this.query.image = res.id
					this.showImg = res.showImg
				})
			},
			//保存收款码图片
			saveImg() {
				let url = ''
				this.current == 0 ? url = this.pay_wechat : url = this.pay_alipay
				let that = this
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: function() {
						that.$msg('图片保存已到相册')
					}
				})
			},
			payBtn() {
				if (!this.query.image) {
					this.$msg('上传凭证不能为空')
					return
				}
				this.$api.pay(this.query).then(res => {
					console.log(res)
					this.$msg(res.msg)
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my'
						})
					}, 800)
				})
			},
			//返回上一页
			gotoback() {
				uni.navigateBack({

				})
			}
		}
	}
</script>

<style lang="scss">
	.topBox {
		width: 100%;
		background: linear-gradient(180deg, #D23030 0%, #FFACAC 100%);
	}

	.saveBtn {
		width: 190rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 2rpx solid #D23030;
		font-size: 26rpx;
		color: #D23030;
		line-height: 55rpx;
		text-align: center;
	}

	.tabox {
		border-radius: 16rpx 16rpx 0 0;
	}

	.urlbox {
		border-radius: 0 0 16rpx 16rpx;
	}

	.footerbtn {
		position: fixed;
		width: 90%;
		left: 50%;
		bottom: 60rpx;
		transform: translateX(-50%);
		background: #D23030;
		box-shadow: 0px 2rpx 10rpx 0px rgba(210, 48, 48, 1);
		border-radius: 44rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
</style>
